<!-- eslint-disable vue/no-parsing-error -->
<script setup lang="ts">
import GoodsSwiper from '@/views/Goods/components/GoodsSwiper.vue';
import { useCartStore } from '@/store';
import { onMounted, ref } from 'vue';
import { request } from '@/utils/request';

const store = useCartStore();
onMounted(async () => {
  // 辅助加入购物车
  // 获取商品
  // const log = await request('get', '/home/goods');
  // 商品详情
  // const result = await request('get', '/goods', { id: 3499024 });
  // console.log(result);

  store.getCardList();
});

const DetailShow = ref(false);
const click = async () => {
  DetailShow.value = !DetailShow.value;
};
// 加入购物车
const add = () => {
  store.addCart({ skuId: '3725015', count: 4 });
  store.getCardList();
};
// 删除商品-
const delCart = async (item: { skuId: string }) => {
  console.log(item);

  const log = await request('delete', '/member/cart', {
    ids: [item.skuId],
    clearAll: false,
    clearInvalid: false,
  });
  store.getCardList();
};
</script>

<template>
  <!-- <div>购物车</div> -->
  <button @click="add">加入购物车</button>
  <div v-if="true" class="xtx-cart">
    <div class="cart-table">
      <div class="cart-table-title">
        <span style="width: 120px"
          ><i class="iconfont icon-checkbox"></i>全选</span
        >
        <span style="width: 400px">商品信息</span>
        <span style="width: 220px">单价</span>
        <span style="width: 180px">数量</span>
        <span style="width: 180px">小计</span>
        <span style="width: 140px">操作</span>
      </div>
      <div class="cart-table-main" v-for="item in store.list" :key="item.id">
        <div class="all-checkout"><i class="iconfont icon-checkbox"></i></div>

        <div class="goods-info">
          <div class="goods-info-left">
            <img class="cart-img" :src="item.picture" alt="" />
          </div>
          <div class="goods-info-right">
            <p>{{ item.name }}</p>
            <div class="goods-info-right-select">
              <span>{{ item.attrsText }}</span>
              <a @click="click" href="javascript:;"
                ><i class="iconfont icon-xiala"></i
              ></a>
            </div>
            <div v-if="DetailShow" class="select-detail">
              <div class="select-top">
                <div class="select-allSize">
                  <span>颜色</span>
                  <a href="javascript:;">
                    <img src="../../images/cart1.png" alt="" />
                  </a>
                  <a href="javascript:;">
                    <img src="../../images/cart1.png" alt="" />
                  </a>
                </div>
                <div class="select-allSize">
                  <span>尺寸</span>
                  <!-- <div> -->
                  <a href="javascript:;">
                    <span class="size">10cm</span>
                  </a>

                  <a href="javascript:;">
                    <span class="size">12cm</span>
                  </a>
                  <a href="javascript:;">
                    <span class="size">14cm</span>
                  </a>
                  <!-- </div> -->
                </div>
                <div class="select-allSize">
                  <span>产地</span>
                  <!-- <div> -->
                  <a href="javascript:;">
                    <span class="size">中国</span>
                  </a>
                  <a href="javascript:;">
                    <span class="size">中国</span>
                  </a>

                  <!-- </div> -->
                </div>
              </div>

              <button class="select-btn">确认</button>
            </div>
          </div>
        </div>
        <div class="prince" tyle="width: 220px">
          <p class="prince-one">￥{{ item.price }}</p>
          <span>比加入时降价</span>
          <span class="prince-two">￥{{ item.postFee }}</span>
        </div>
        <div class="num" tyle="width: 180px">
          <div class="num-box">
            <a class="add" href="javascript:;"
              ><i class="iconfont icon-jiahao1"></i
            ></a>
            <div class="numend">{{ item.count }}</div>
            <a class="subtract" href="javascript:;"
              ><i class="iconfont icon-jianhao"></i
            ></a>
          </div>
        </div>
        <div class="small-count" tyle="width: 180px">
          <p>￥{{ +item.price * item.count }}</p>
        </div>
        <div class="operate" tyle="width: 120px">
          <a href="javascript:;">移入收藏夹</a>
          <a class="active" href="javascript:;" @click="delCart(item)">删除</a>
          <a href="javascript:;">找相似</a>
        </div>
      </div>
    </div>
    <div class="cart-pay">
      <div class="cart-pay-left">
        <a href="javascript:;"><i class="iconfont icon-checkbox"></i>全选</a>
        <a href="javascript:;">删除商品</a>
        <a href="javascript:;">移入收藏夹</a>
        <a href="javascript:;">清空失效商品</a>
      </div>
      <div class="cart-pay-right">
        <span>共3件商品,已选择0件</span>
        <span>|</span>
        <span>商品合计:￥0</span>
        <span>|</span>
        <span>应付总额:￥0</span>
        <button class="allpaybtn">下单结算</button>
      </div>
    </div>
    <div class="cart-like">
      <!-- <h3>猜你喜欢</h3> -->
      <GoodsSwiper>猜你喜欢</GoodsSwiper>
    </div>
  </div>
  <div v-else class="null">
    <div class="cart-null">
      <img src="../../images/cart-null.png" alt="" />
      <p>购物车内暂时没有商品</p>
      <button class="btn">继续逛逛</button>
    </div>
  </div>
</template>

<style scoped lang="less">
@import '../Cart/icon/iconfont.css';

.xtx-cart {
  width: 1240px;
  height: 1500px;
  // background-color: aquamarine;
  margin: 20px auto;
}

.cart-table {
  width: 100%;
  background-color: #fff;

  // background-color: lightblue;
  .cart-table-title {
    width: 100%;
    height: 74px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ece9e9;

    // display: flex;
    // justify-content: space-evenly;
    span {
      text-align: center;
      line-height: 74px;
      display: inline-block;
    }
  }

  .cart-table-main {
    width: 100%;
    height: 120px;
    // background-color: #0ce973;
    display: flex;
    padding: 10px 0;

    .all-checkout {
      width: 120px;
      height: 106px;
      // background-color: #0b16b3;
      text-align: center;
      line-height: 106px;
    }

    .goods-info {
      padding: 10px, 0;
      height: 106px;
      width: 400px;
      // background-color: aqua;
      display: flex;
      justify-content: space-between;

      .goods-info-left {
        width: 106px;
        height: 106px;
        // background-color: #0cb4ec;

        .cart-img {
          width: 100%;
          height: 100%;
        }
      }

      .goods-info-right {
        width: 280px;
        height: 106px;
        // background-color: #c32323;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;

        .goods-info-right-select {
          margin: 10px auto;
          width: 180px;
          height: 28px;
          border: 1px solid #e4e4e4;
          font-size: 14px;
          color: #7c7c7c;
        }

        .select-detail {
          // opacity: 0;
          width: 400px;
          height: 260px;
          border: 1px dashed #27bb9a;
          background-color: #fff;
          position: absolute;
          left: 45px;
          top: 90px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .select-top {
            width: 100%;
            height: 180px;
            // background-color: #ca7979;
            padding-left: 15px;
            // padding-top: 20px;

            .size {
              margin-left: 10px;
            }

            img {
              margin-left: 10px;
              width: 50px;
              height: 50px;
            }

            .select-allSize {
              margin-top: 20px;
            }
          }

          .select-btn {
            margin-left: 60px;
            width: 100px;
            height: 35px;
            background-color: #27bb9a;
            border: 1px solid #27bb9a;
            color: #fff;
            border-radius: 4px;
          }

          .size {
            display: inline-block;
            width: 85px;
            height: 31px;
            border: 1px solid #d0d4d3;
            line-height: 31px;
            text-align: center;
          }
        }
      }
    }

    .prince {
      width: 220px;
      height: 106px;
      // background-color: #900ef4;
      text-align: center;
      padding: 30px 0;

      .prince-one {
        font-size: 18px;
      }

      .prince-two {
        color: #9a2e1f;
      }
    }

    .num {
      width: 180px;
      height: 106px;
      // background-color: #360eaf;
      display: flex;
      justify-content: center;
      align-items: center;

      .num-box {
        width: 116px;
        height: 28px;
        border: 1px solid #e4e4e4;
        color: #7c7c7c;
        display: flex;
        justify-content: space-around;

        .numend {
          width: 60px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          border: 0.3px solid #e4e4e4;
        }
      }
    }

    .small-count {
      width: 180px;
      height: 106px;
      // background-color: #aebbeb;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #9a2e1f;
    }

    .operate {
      width: 140px;
      height: 106px;
      // background-color: #b483d9;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;

      a:hover {
        color: #27bb9a;
      }

      // .active {
      //   color: #27bb9a;
      // }
    }
  }
}

.cart-pay {
  margin-top: 20px;
  width: 100%;
  height: 94px;
  // background-color: #3dbfdf;
  background-color: #fff;
  display: flex;
  justify-content: space-between;

  .cart-pay-left {
    width: 400px;
    height: 100%;
    line-height: 94px;

    a {
      padding-left: 20px;

      &:hover {
        color: #27bb9a;
      }
    }
  }

  .cart-pay-right {
    padding: 20px;
    width: 840px;
    line-height: 94px;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    span {
      padding-right: 20px;
    }

    .allpaybtn {
      width: 180px;
      height: 50px;
      border-radius: 4px;
      background-color: #27bb9a;
      border: 1px solid #27bb9a;
      color: #fff;
    }
  }
}

.cart-like {
  width: 100%;
  height: 456px;
  // background-color: rgb(103, 182, 231);

  h3 {
    font-size: 20px;
    font-weight: normal;
    padding: 25px;
  }

  // .cart-like-detail {}
}

.null {
  width: 1240px;
  height: 300px;
  // background-color: aquamarine;
  margin: 20px auto;
  background-color: #fff;
  margin-top: 20px;
}

.cart-null {
  width: 400px;
  height: 300px;
  // background-color: #7c7c7c;
  // padding: 200px 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  img {
    // padding-top: 200px;

    width: 300px;
    height: 200px;
  }

  .btn {
    width: 180px;
    height: 50px;
    background-color: #27bb9a;
    border-radius: 6px;
    border: 1px solid #27bb9a;
    color: #fff;
    font-size: 16px;
  }
}
</style>
